<template>
  <div class="app-container">
    <el-card class="tableset" shadow="never" :body-style="{ padding: '0px' }">
      <!-- 小标题 -->
      <div class="title">
        <span>权限角色管理</span>
        <el-button
          type="primary"
          class="title-button-right"
          icon="el-icon-plus"
          style="margin-left: 0.5rem"
          plain
          @click="openAddRoleInfoDialog"
        >新增权限角色</el-button>
      </div>
      <!-- 小标题 -->

      <!-- 搜索关键词 -->
      <div class="funtion">
        <el-input
          v-model="get_permission_role_list.keywordName"
          placeholder="请输入关键词"
          clearable
          @keyup.enter.native="getPermissionRoleList"
        >
          <el-button slot="append" icon="el-icon-search" @click="getPermissionRoleList" />
        </el-input>
      </div>
      <!-- 搜索关键词 -->
      
      <!-- 数据表 -->
      <el-table
        v-loading="dataRequestLoading"
        element-loading-text="正在加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        class="table"
        :height="tableHeight"
        :max-height="tableHeight"
        highlight-current-row
        :data="data_permission_role_list.data"
        @sort-change="changeSort"
      >
        <el-table-column prop="name" label="权限角色名称" />
        <el-table-column
          prop="create_time"
          label="创建时间"
          sortable="custom"
          column-key="create_time"
        />
        <el-table-column
          prop="modified_time"
          label="修改时间"
          sortable="custom"
          column-key="modified_time"
        />
        <el-table-column fixed="right" label="操作" width="150px">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              @click="openEditRoleInfoDialog(row)"
            >编辑</el-button>
            <el-button
              type="danger"
              @click="deletePermissionRoleInfo(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 数据表 -->

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="data_permission_role_list.total"
        :page-size="get_permission_role_list.pageSize"
        :page-sizes="[20, 50, 100]"
        :current-page="get_permission_role_list.currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      />
      <!-- 分页 -->
    </el-card>

    <!-- 编辑权限角色信息dialog -->
    <el-dialog
      :title="change_role_info_title"
      :visible.sync="changePermissionRoleInfoDialog"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="changePermissionRoleInfoRulesForm"
        :model="change_role_info"
        status-icon
        size="mini"
        label-width="110px"
      >
        <el-form-item prop="name" :rules="rules.input" label="权限角色名称">
          <el-input v-model="change_role_info.name" prefix-icon="el-icon-edit" clearable />
        </el-form-item>
        <el-form-item prop="checkRoleModuleList" :rules="rules.checkbox" label="权限模块">
          <!--          <el-checkbox-group v-model="change_role_info.checkRoleModuleList">-->
          <!--            <el-checkbox-->
          <!--              v-for="item in data_permission_role_list.permission_module"-->
          <!--              :key="item.permission_module_id"-->
          <!--              :label="item.permission_module_id"-->
          <!--            >{{ item.module_name }}</el-checkbox>-->
          <!--          </el-checkbox-group>-->
          <el-tree
            ref="tree"
            :data="data_permission_role_list.permission_module"
            show-checkbox
            node-key="permission_module_id"
            highlight-current
            :props="defaultProps"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="changePermissionRoleInfoDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="changePermissionRoleInfo">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 编辑权限角色信息dialog -->
  </div>
</template>

<script>
import {
  getPermissionRoleList,
  getPermissionRoleModule,
  changePermissionRoleInfo,
  deletePermissionRoleInfo
} from '@/api/authority-manage'

export default {
  data() {
    return {
      // table高度自适应
      tableHeight: window.innerHeight - 265,

      // loading开关
      dataRequestLoading: false,

      // dialog 开关
      changePermissionRoleInfoDialog: false,

      // 发送请求参数
      get_permission_role_list: {
        pageSize: 20,
        currentPage: 1,
        keywordName: '',
        sort_name: 'permission_role_id',
        sort: 'desc'
      },

      // 返回参数
      data_permission_role_list: {
        data: [],
        permission_module: [],
        total: 0
      },

      // 编辑权限角色信息标题
      change_role_info_title: '',

      // 编辑权限角色参数
      change_role_info: {
        permission_role_id: '',
        name: ''
      },

      // 表单校验规则
      rules: {
        input: {
          required: true,
          message: '请输入权限角色名称！',
          trigger: 'blur'
        }
      },
      defaultProps: {
        children: 'permission_module',
        label: 'module_name'
      }
    }
  },
  mounted() {
    this.getPermissionRoleList() // 查询权限角色信息列表
  },
  methods: {
    // 查询权限角色信息列表
    getPermissionRoleList() {
      this.dataRequestLoading = true
      getPermissionRoleList(this.get_permission_role_list).then(res => {
        this.data_permission_role_list.data = res.result.showing
        this.data_permission_role_list.permission_module =
          res.result.permission_module
        this.data_permission_role_list.total = res.result.total
        this.dataRequestLoading = false
      })
    },

    // 新增/修改权限角色信息
    changePermissionRoleInfo() {
      this.$refs.changePermissionRoleInfoRulesForm.validate(valid => {
        if (valid) {
          console.log(this.$refs.tree.getCheckedNodes(true))
          const data = Object.assign(this.change_role_info, {
            checkRoleModuleList: this.$refs.tree.getCheckedKeys(true)
          })
          changePermissionRoleInfo(data).then(res => {
            this.getPermissionRoleList()
            this.changePermissionRoleInfoDialog = false
          })
        } else {
          return false
        }
      })
    },

    // 删除权限角色信息（逻辑删除）
    deletePermissionRoleInfo(row) {
      this.$confirm('此操作将永久删除该权限角色信息并禁用当前权限角色账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePermissionRoleInfo({ permission_role_id: row.permission_role_id }).then(res => {
          this.getPermissionRoleList()
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },

    // 打开新增权限角色信息dialog界面
    openAddRoleInfoDialog() {
      this.change_role_info_title = '新增权限角色信息'
      this.change_role_info = {
        permission_role_id: '',
        name: ''
      }
      this.changePermissionRoleInfoDialog = true
    },

    // 打开编辑权限角色信息dialog界面
    openEditRoleInfoDialog(row) {
      this.change_role_info_title = '修改权限角色信息'
      // 异步查询权限角色权限模块
      const params = { permission_role_id: row.permission_role_id }
      getPermissionRoleModule(params).then(res => {
        this.change_role_info = {
          permission_role_id: row.permission_role_id,
          name: row.name
        }
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(res.result)
        })
        this.changePermissionRoleInfoDialog = true
      })
    },

    // 切换每页条数方法
    changePageSize(data) {
      this.get_permission_role_list.pageSize = data
      this.getPermissionRoleList()
    },

    // 切换页码方法
    changeCurrentPage(data) {
      this.get_permission_role_list.currentPage = data
      this.getPermissionRoleList()
    },

    //  更换排序
    changeSort({ column, order }) {
      if (column.columnKey == 'create_time') {
        switch (order) {
          case 'descending':
            this.get_permission_role_list.sort_name = 'create_time'
            this.get_permission_role_list.sort = 'desc'
            this.getPermissionRoleList()
            break
          case 'ascending':
            this.get_permission_role_list.sort_name = 'create_time'
            this.get_permission_role_list.sort = 'asc'
            this.getPermissionRoleList()
            break
          default:
            this.get_permission_role_list.sort_name = 'permission_role_id'
            this.get_permission_role_list.sort = 'desc'
            this.getPermissionRoleList()
        }
      } else if (column.columnKey == 'modified_time') {
        switch (order) {
          case 'descending':
            this.get_permission_role_list.sort_name = 'modified_time'
            this.get_permission_role_list.sort = 'desc'
            this.getPermissionRoleList()
            break
          case 'ascending':
            this.get_permission_role_list.sort_name = 'modified_time'
            this.get_permission_role_list.sort = 'asc'
            this.getPermissionRoleList()
            break
          default:
            this.get_permission_role_list.sort_name = 'permission_role_id'
            this.get_permission_role_list.sort = 'desc'
            this.getPermissionRoleList()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
